import './MenuMapping.scss'
import { useRequest } from 'alova'
import { useState } from 'react'
import PropTypes from 'prop-types'
import { Button, Input } from 'antd'
import { useMount } from 'ahooks'

import { Http } from '../../Api'

import { GetIndexedDB, PutIndexedDB } from '../../Utils/IndexedDB'

const MenuMapping = ({ data }) => {
    MenuMapping.propTypes = { data: PropTypes.object }
    const [Value, setValue] = useState(data.mappingName)
    const [Mapping, setMapping] = useState()
    const [Loading, setLoading] = useState(false)

    const { send: posData } = useRequest((params) => Http({ url: 'posSaveJsonInfoBy', params, path: ['theme/AdminMenu'] }), { immediate: false })

    const click = () => {
        if (Value !== '') Mapping[data.uuid] = Value
        else delete Mapping[data.uuid]
        const params = JSON.stringify(JSON.stringify(Mapping))
        posData(params).then(async () => {
            await PutIndexedDB('mapping', Mapping)
            window.location.reload()
        })
        setLoading(true)
    }

    useMount(async () => { setMapping(await GetIndexedDB('mapping')) })


    return (
        <div className='MenuMapping'>
            <div className='Label'>
                <div>菜单原名称 : </div>
                <div>{data.tableName}</div>
            </div>
            <div className='Label'>
                <div>菜单映射名称 : </div>
                <Input
                    value={Value}
                    placeholder='请输入映射名称.空值将使用菜单原本名称渲染'
                    onChange={e => setValue(e.target.value)}
                />
            </div>
            <div className='Button'>
                <Button type='primary' loading={Loading} onClick={click}>提交</Button>
            </div>
        </div>
    );
};

export default MenuMapping;